<template>
	<view class="content">
		<u-navbar placeholder :autoBack="false" title="活动" leftIconColor="#fff">
		</u-navbar>
		<u-search placeholder="选择景点" @focus="show = true" :showAction="false"></u-search>

		<view class="recommend">
			<view class="list">
				<view class="list_item" v-for="(item,index) in scenicList" :key="index">
					<view class="item_body">
						<view class="body_left">
							<u-image :src="item.activityUrl|photoPrefix" radius="10px" width="225rpx" height="175rpx"
								:fade="true" duration="450"></u-image>
						</view>
						<view class="body_right">
							<view>
								<u-text size="38rpx" :text="item.activityName" :lines="1"></u-text>
								<!-- <u-text :lines="1" :text="item.scenicName"></u-text> -->
								<u-text type="warning" :lines="2" :text="item.activityTag"></u-text>
							</view>
							<view>
								<!-- <u-tag style="display: inline-block;margin-right: 10rpx" type="info"
									v-for="items in item.ticketTag" :text="items" size="mini"></u-tag> -->
								<!-- <u-text size="24rpx" :lines="1" :text="'景点地址：'+item.scenicAddress"></u-text>
								<u-text size="24rpx" :lines="1" :text="'开放时间：'+item.startTime+'-'+item.endTime">
								</u-text> -->
							</view>
						</view>
					</view>
					<u-divider v-if="index+1 != scenicList.length"></u-divider>
				</view>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" @cancel="show = false" @confirm="search" keyName="scenicName"></u-picker>
		<tabbar currentTab='activity' />
	</view>
</template>

<script>
	import sclist from "@/pages/index/scenicList/components/list.vue"
	import tabbar from "@/components/tabbar/index"
	export default {
		components: {
			sclist,
			tabbar
		},
		data() {
			return {
				data: [],
				scenicList: [],
				columns: [
					[]
				],
				show: false,
			}
		},
		mounted() {
			this.getScenic();
			// this.getData();
		},
		methods: {
			getData(id) {
				this.$api({
					url: '/customer/getActive/'+id,
					method: 'get'
				}).then((res) => {
					this.scenicList = res.data
				})
			},
			getScenic() {
				this.$api({
					url: '/customer/getScenicIdAndNames',
					method: 'get'
				}).then((res) => {
					res.data.forEach(item => {
						this.columns[0].push({
							scenicName:item.scenicName,
							id:item.id
						})
						
					});
				})
			},
			search(value){
				this.getData(value.indexs[0]);
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tag--mini[data-v-3732d7af] {
		padding: 0 30rpx;
	}

	.content {
		.recommend {
			padding: 0 30rpx;

			.list {
				padding-top: 30rpx;

				.item_body {
					display: flex;

					.body_right {
						width: 100%;
						padding: 0 25rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}
				}
			}
		}
	}
</style>
